<template>
	<view>
		<!-- 地址列表 有内容 显示 -->
		<view class="list">
			<!-- 地址 -->
			<u-swipe-action>
				<u-swipe-action-item v-for="(item,index) in userAddress" :key="item.id" @click='removeAddress'
					:name='index' :options="options2">
					<view class="swipe-action u-border-top u-border-bottom">
						<view @click='goOrder(index)' class="swipe-action__content">
							<view class="list_t">
								<text>{{item.username}}</text>
								<text>{{item.userphone}}</text>
								<text class="list_con">{{item.label}}</text>
							</view>
							<view class="list_b">
								{{item.location}}{{item.useraddress}}
							</view>
						</view>
					</view>
				</u-swipe-action-item>
			</u-swipe-action>


		</view>

		<!-- 底部 -->
		<view @click="goAddress" class="bottom">
			+ 新建收获地址
		</view>


		<!-- 地址列表没有内容显示 -->
		<view class="">
			<!-- 暂无地址，请前往添加地址 -->
		</view>
	</view>
</template>

<script>
	// 用户 uid
	import user from '../../common/userinfo.js'
	// 引入封装好的接口
	import {
		Addresslist, // 地址列表
		AddRessRemove, // 地址删除
		Addressedit //地址编辑
	} from '../../request/app.js'
	export default {
		data() {
			return {
				// 地址按钮
				options2: [{
					text: '编辑',
					style: {
						backgroundColor: '#3c9cff'
					}
				}, {
					text: '删除',
					style: {
						backgroundColor: '#f56c6c'
					}
				}],
				// 存放用户的地址信息
				userAddress: [],
				// 
				id:''
			}
		},
		methods: {
			// d点击跳转地址添加  编辑页面
			goAddress() {
				uni.navigateTo({
					url: '../addAddresslist/addAddresslist'
				})
			},
			
			
			Listaddress(){
				// 调用地址列表接口
				Addresslist({
						uid: user.uid
					})
					.then(res => {
						console.log(res, '地址列表');
						if (res.data.code == 200) {
							this.userAddress = res.data.list
							console.log(this.userAddress);
						}
					})
			},
			
			
			// 删除地址事件
			removeAddress(e) {
				// 用事件源e 来选择点击的按钮，  ：name 动态绑定 index 用于获取点击的地址下标，来获取地址id
				console.log(e, '按钮');
				console.log(this.userAddress[e.name].id);
				if (e.index == 1) { // 删除按钮
					// 调用删除地址接口
					AddRessRemove({
							id: this.userAddress[e.name].id
						})
						.then(res => {
							console.log(res, '删除地址响应');
							// 删除成功后  重新调用地址列表接口，重新渲染视图
							if (res.data.code == 200) {
								Addresslist({
										uid: user.uid
									})
									.then(res => {
										console.log(res, '地址列表');
										if (res.data.code == 200) {
											this.userAddress = res.data.list
										}
										console.log(this.userAddress);
									})
							}

						})
				}

				if (e.index == 0) { // 编辑按钮
					// 跳转到添加地址页面
					uni.navigateTo({
						url: '../addAddresslist/addAddresslist?id=' + this.userAddress[e.name].id 
					})
					// 将信息存在本地
					uni.setStorageSync('siteinfo', this.userAddress[e.name])
				}
			},
			// 点击跳转到订单页
			goOrder(index) {
				console.log(index, '点击的地址下标');
				uni.navigateTo({
					url: '../order/order?id=' + this.userAddress[index].id
				})
			}
		},
		onLoad(opation) {
			console.log(opation.id, '地址列表opation');
			// 调用列表方法
			this.Listaddress()
			
			
			this.id = opation.id
			if (this.id) {
				// 获取修改后存在本地的 地址信息
				let Address = uni.getStorageSync('siteinfo')
				console.log(Address,111111);
				// 编辑接口
				Addressedit({
					id: this.id,
					username: Address.name,
					userphone: Address.phone,
					location: Address.path,
					useraddress: Address.alladress,
				}) 
				.then(res=>{
					console.log(res,'编辑接口响应');
					// 编辑成功后 调用地址列表接口
					this.Listaddress()
				})
			}
		}
	}
</script>

<style lang="scss">
	.u-page {
		padding: 0;
	}

	.u-demo-block__title {
		padding: 10px 0 2px 15px;
	}

	.swipe-action {
		&__content {
			height: 100px;
			padding: 30rpx 0 30px 10px;
			box-sizing: border-box;

			&__text {
				font-size: 15px;
				color: $u-main-color;
				padding-left: 30rpx;
			}
		}
	}

	.list {
		.list_t {
			display: flex;

			text {
				margin-right: 10px;
			}

			.list_con {
				background-color: tomato;
				border-radius: 5px;
				color: #fff;
			}
		}

		.list_b {
			margin-top: 10px;
			font-size: 20px;
		}
	}

	.bottom {
		width: 320px;
		height: 80px;
		font-size: 25px;
		text-align: center;
		border-radius: 40px;
		line-height: 80px;
		color: #fff;
		background-color: red;
		position: fixed;
		bottom: 20px;
		left: 0;
		margin: 10%;
	}
</style>
